import React, {Component} from 'react';
// import moment from 'moment';
import './style.less';
import { Card, Form, Button, Input, Radio, Icon, InputNumber, Select,
		Switch, DatePicker, TimePicker, Upload, Checkbox} from 'antd';
const Option = Select.Option;
const { TextArea } = Input;

class FormReg extends Component{

	state={

	}

	getBase64 = (img, callback)=> {
	  const reader = new FileReader();
	  reader.addEventListener('load', () => callback(reader.result));
	  reader.readAsDataURL(img);
	}

	handleChange = (info) => {
	    if (info.file.status === 'uploading') {
	      this.setState({ loading: true });
	      return;
	    }
	    if (info.file.status === 'done') {
	      // Get this url from response in real world.
	      this.getBase64(info.file.originFileObj, imageUrl => this.setState({
	        userImg: imageUrl,
	        loading: false,
	      }));
	    }
  }
  // handelSubmit=() =>{
  // 	let userInfo = this.props.form.getFieldsValue();
  // 	console.log(userInfo);
  // 	// message.success(`${userInfo.userName} 欢迎登录`);
  // }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
    handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }
	render() {
		const { getFieldDecorator } = this.props.form;
		const formItemLayout = {
	      labelCol: {
	        xs: { span: 24 },
	        sm: { span: 4 },
	      },
	      wrapperCol: {
	        xs: { span: 24 },
	        sm: { span: 12 },
	      }
    }
    const offsetLayout = {
    	wrapperCol:{
    		xs: 24,
    		sm:{
    			span: 12,
    			offset: 4
    		}
    	}
    }


		return (
			<div>
				<Card title="注册表单">
					<Form  onSubmit={this.handleSubmit}>
						<Form.Item
							{...formItemLayout}
						 	label="用户名">
							{
								getFieldDecorator('userName', {
									initialValue: '',
									rules:[{
										required: true,
										message: 'Please input your username!'
									},{
										min:5, max: 10,
										message: '请输入5到10位的字符'
									},{
										pattern: new RegExp('^\\w+$', 'g'),
										message: '用户名必须为英文字母或者数字'
									}]
								})(<Input prefix={<Icon type="user" />} placeholder="请输入用户名" />)
							}
						</Form.Item>
						<Form.Item
						 	label="密码"
						 	{...formItemLayout}>
						{
								getFieldDecorator('password', {
									initialValue: '',
									rules:[{
										required: true,
										message: 'Please input your Password!'
									},{
										min:6, max: 10,
										message: '请输入5到10位的字符'
									},{
										pattern: /^\w+$/g,
										message: '用户名必须为英文字母或者数字'
									}]
								})(<Input  prefix={<Icon type="lock" />} placeholder="请输入密码"  onBlur={this.handleConfirmBlur} />)
							}
						</Form.Item>
						<Form.Item
						          {...formItemLayout}
						          label="E-mail"
						        >
						          {getFieldDecorator('email', {
						            rules: [{
						              type: 'email', message: 'The input is not valid E-mail!',
						            }, {
						              required: true, message: 'Please input your E-mail!',
						            }],
						          })(
						            <Input />
						          )}
					       </Form.Item>
						<Form.Item label="性别" {...formItemLayout}>
							{
								getFieldDecorator('sex', {
									initialValue: '1'
								})(
									<Radio.Group>
										<Radio value="1">男</Radio>
										<Radio value="2">女</Radio>
									</Radio.Group>
								)
							}
						</Form.Item>
						<Form.Item label="年龄" {...formItemLayout}>
							{
								getFieldDecorator('age', {
									initialValue: 18
								})(
									<InputNumber />
								)
							}
						</Form.Item>
						<Form.Item label="当前状态" {...formItemLayout}>
							{
								getFieldDecorator('state', {
									initialValue: 'baidu'
								})(
									<Select mode="multiple">
										<Option value="1">百度</Option>
										<Option value="2">火狐</Option>
										<Option value="3">谷歌</Option>
										<Option value="4">苹果</Option>
										<Option value="5">安卓</Option>
									</Select>
								)
							}
						</Form.Item>
						<Form.Item label="爱好" {...formItemLayout}>
							{
								getFieldDecorator('happly', {
									initialValue: '散步'
								})(
									<Select mode="multiple">
										<Option value="1">散步</Option>
										<Option value="2">阅读</Option>
										<Option value="3">唱歌</Option>
										<Option value="4">跳舞</Option>
										<Option value="5">弹钢琴</Option>
									</Select>
								)
							}
						</Form.Item>
						<Form.Item label="是否已婚" {...formItemLayout}>
							{
								getFieldDecorator('isMarried', {
									valuePropName: 'checked',
									initialValue: true
								})(
									<Switch />
								)
							}
						</Form.Item>
						<Form.Item label="生日" {...formItemLayout}>
							{
								getFieldDecorator('birthday')(
									<DatePicker showTime format="YYY-MM-DD" />
								)
							}
						</Form.Item>
						<Form.Item label="联系地址" {...formItemLayout}>
							{
								getFieldDecorator('address',{
									initialValue: '南京中心大厦'
								})(
									<TextArea autosize={{ minRows: 1, maxRows: 4 }}
									/>)
							}
						</Form.Item>
						<Form.Item label="早起时间" {...formItemLayout}>
							{
								getFieldDecorator('time')(
									<TimePicker />)
							}
						</Form.Item>
						<Form.Item label="头像" {...formItemLayout}>
							{
								getFieldDecorator('userImg')(
									<Upload
										action="//jsonplaceholder.typicode.com/posts/"
										showUploadList={false}
										listType="picture-card"
										onChange={this.handleChange}
									>
									{this.state.userImg ? <img src={this.state.userImg} alt="" /> : <Icon type="plus" />}
									</Upload>)
							}
						</Form.Item>
						<Form.Item {...offsetLayout}>
							{
								getFieldDecorator('userImg')(
									<Checkbox>我已阅读过<a href="">协议</a></Checkbox>)
							}
						</Form.Item>
						<Form.Item {...offsetLayout}>
							<Button type="primary" htmlType="submit" onClick={this.handelSubmit}>Register</Button>
						</Form.Item>
					</Form>
				</Card>
			</div>
		);
	}
}
export default Form.create()(FormReg);